<template>
  <carousel :transition="500">
    <slide v-for="(item, index) in bannerListRendonly" :key="index">
      <div class="carousel__item">
        <img :src="item.screenshot" width="100%" class="img" @click="handleOpenPage(item)"/>
      </div>
    </slide>
    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>
<script setup name="Banner">
import { inject, onMounted } from 'vue';

import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

import useSymbols from '../../compostions/useSymbols';

const { bannerListRendonly, getBannerList } = inject(useSymbols);

const handleOpenPage = (item) => {
    window.myApi.sendOpenSellUrl(item.url);
}

onMounted(() => {
  getBannerList();
});
</script>
<style scoped>
.carousel__item {
  min-height: 200px;
  width: 100%;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel__slide {
  padding: 5px;
}
.carousel__slide--sliding {
  transition: 0.5s;
}

.carousel__slide {
  opacity: 0.9;
  transform: rotateY(-20deg) scale(0.9);
}

.carousel__slide--active ~ .carousel__slide {
  transform: rotateY(20deg) scale(0.9);
}

.carousel__slide--prev {
  opacity: 1;
  transform: rotateY(-10deg) scale(0.95);
}

.carousel__slide--next {
  opacity: 1;
  transform: rotateY(10deg) scale(0.95);
}

.carousel__slide--active {
  opacity: 1;
  transform: rotateY(0) scale(1.1);
}
.img{
    cursor: pointer;
}
</style>